<template>
	<view>
		<view class="self-billing">


			<mainContentVue :items="items" ref="refChild" :search-key="searchKey" @toggle-item="toggleItem" />

			<footerBar :total-num="totalNum" :total-price="totalPrice"
				@toggle-selected-list="showSelectedListModal = !showSelectedListModal" @submit="openDialog" />

			<view v-if="showSelectedListModal " class="selected-list-modal">
				<view class="modal-header">
					<view>已选列表</view>
					<view class="clear-btn" @click.stop="clearSelectedList">清空列表</view>
				</view>
				<view v-for="(item, idx) in selectedItems" :key="idx" class="selected-item">
					<u-icon name="checkmark-circle-fill" color="#1cb7d6" size="32rpx" />
					<view class="item-info">
						<view class="item-name">{{ item.name }}（{{ item.en }}）</view>
						<view class="item-bottom">
							<view class="item-price">￥{{ item.money.toFixed(2) }}</view>
							<view class="item-count">数量：X 1</view>
						</view>
					</view>
				</view>
			</view>

			<Dialog :show="showDialogModal" @confirm="confirm" @close="showDialogModal = false" title="温馨提示"
				:mask-close-able="true">
				<view class="slot-content">
					<view class="text-center">
						<rich-text :nodes="'提交后无法更改，如需更改，请重新申请'"></rich-text>
					</view>
				</view>
			</Dialog>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import mainContentVue from './component/mainContent.vue';
	import footerBar from './component/footerBar.vue'
	export default {
		components: {
			mainContentVue,
			footerBar
		},
		data() {
			return {
				categories: [],
				items: [],
				showSelectedListModal: false,
				showDialogModal: false,
				searchKey: ''
			}
		},
		computed: {
			...mapGetters([
				'userInfo'
			]),
			totalPrice() {
				return this.items.filter(i => i.checked).reduce((sum, i) => sum + i.money, 0).toFixed(2);
			},
			totalNum() {
				return this.items.filter(i => i.checked).length;
			},
			selectedItems() {
				return this.items.filter(i => i.checked);
			}
		},
		methods: {
			toPagePath(path) {
				uni.navigateTo({
					url: path
				})
			},

			onSearch(key) {
				this.searchKey = key;
			},
			toggleItem(list) {
				this.items = list;
			},
			clearSelectedList() {
				this.$refs.refChild.init();
				this.items.forEach(i => {
					i.checked = false
				});

			},
			openDialog() {
				if (this.items.length == 0) {
					this.$u.toast("没有开单项目");
					return;
				} else {
					this.showDialogModal = true
				}

			},
			confirm() {
				this.items.forEach(item => {
					item.patId = this.userInfo.patId
					item.patName = this.userInfo.patName
				})

				this.showDialogModal = false
			}
		}
	}
</script>

<style scoped>
	.self-billing {
		background: linear-gradient(#e0f3ff 0%, #fff 30%);
		/* min-height: 100vh; */
		/* display: flex; */
		/* flex-direction: column; */
	}

	.userCard {
		margin: 0 24rpx;
	}

	.selected-list-modal {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 130rpx;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		box-shadow: 0 -2rpx 16rpx #eee;
		z-index: 666;
		padding: 32rpx 24rpx 24rpx 24rpx;
		max-height: 70vh;
		overflow-y: auto;
	}

	.modal-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 24rpx;
	}

	.clear-btn {
		background: none;
		color: #1cb7d6;
		border: 1px solid #1cb7d6;
		border-radius: 26rpx;
		font-size: 26rpx;
		padding: 0 16rpx;
	}

	.selected-item {
		display: flex;
		align-items: center;
		background: #f8f8f8;
		border-radius: 12rpx;
		padding: 18rpx 16rpx;
		margin-bottom: 16rpx;
	}

	.selected-item .item-info {
		flex: 1;
		margin-left: 16rpx;
	}

	.item-name {
		font-size: 28rpx;
		color: #222;
	}

	.item-bottom {
		display: flex;
		justify-content: space-between;
	}

	.item-price {
		color: #ff5a5f;
		font-size: 26rpx;
		margin: 4rpx 0;
	}

	.item-count {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}
</style>